<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import {getSongDetailAPI} from '@/apis/music.uts'
    import SongList from './component/SongList.vue';
	import {userUseStoreId} from '@/stores/musicStore.uts'
	import progressVue from './component/progress.vue';
	 import audioPlayer from './index.uts';
	const isPlaying = ref<boolean>(true); // 播放状态
	const isPlayingData = ref<boolean>(true); // 播放状态
	const isFlag = ref<boolean>(false); // 播放状态
	const progress = ref<number>(50); // 进度条进度
	const audioInstance=ref<null>(null) // 全局音频实例
	 const   currentSongId=ref<null>(null) // 当前播放的歌曲ID
	 const songId=ref('')
	 const userStore=userUseStoreId()
	
	 // 当前播放的歌曲
	 const currentSong = ref<any>(null);
	 
	 // 音频上下文
	  let audioContext = uni.createInnerAudioContext();
	 
	// 返回按钮逻辑
	    // 定时器更新当前时间显示
	    let timer = null;
		const props=defineProps({
			id:{
				type:String,
				default:''
			}
		})
	
	// 播放/暂停切换逻辑
	console.log('id',props.id);
	const togglePlay = async () => {
	 isPlayingData.value =!isPlayingData.value
	  // 这里可以添加音频播放/暂停的逻辑
	   audioPlayer.togglePlay();
	};
	const onUp=()=>{
		
		audioPlayer.prev()
		
		 
		  isPlayingData.value =isPlayingData.value
		getSongDetail()
	}
	const onDown=()=>{
		
		audioPlayer.next()
		
		 isPlayingData.value =isPlayingData.value
		getSongDetail()
	}
	async function getSongDetail(){
		const ids=props.id
		if(ids){
			const res =await getSongDetailAPI(ids)
			
			const idList = res.privileges.map((item: any) => item.id.toString()) // 直接传递数组
			audioPlayer.play(idList)
			audioPlayer.setSongs(res.songs)
			songId.value=idList[audioPlayer.currentIndex.value]
			const user=res.songs[audioPlayer.currentIndex.value]
			userStore.name=user.name
			userStore.artist=user.ar[0].name
		}
	}
	onLoad(async ()=>{
		getSongDetail()
		
		    
	})
onMounted(()=>{
	function getCurrentPageFullUrl() {
	  let fullUrl = '';
	
	  // H5 环境
	  // #ifdef H5
	  fullUrl = window.location.pathname + window.location.search;
	  // #endif
	
	  // 小程序/App 环境
	  // #ifndef H5
	  const pages = uni.getCurrentPages();
	  if (pages.length === 0) return '';
	  
	  const currentPage = pages[pages.length - 1];
	  const route = currentPage.route || '';
	  const queryParams = currentPage.options || {};
	
	  const queryString = Object.entries(queryParams)
	    .map(([key, val]) => `${key}=${encodeURIComponent(val)}`)
	    .join('&')
	
	  fullUrl = `/${route}${queryString ? '?' + queryString : ''}`;
	  // #endif
	
	  return fullUrl;
	}
	
	// 使用示例
	const currentUrl = getCurrentPageFullUrl();
	userStore.url=currentUrl
})
	console.log(audioPlayer.currentSongInfo.value); // 输出：/subPagesMusic/MusicHeader/index?id=108914
	//播放歌曲
	// function  audioPlay (ids: any) {
	
	//  audioContext.onEnded(() => {
 //    console.log('歌曲播放结束');
 //    // 可以在这里处理歌曲播放结束后的逻辑
 //  });
	//   // 这里可以添加播放歌曲的逻辑
	//   const audioUrl = `https://api.qijieya.cn/meting/?type=url&id=${ids}`;
	// 	  const audio = uni.createInnerAudioContext();
		  
	// 	  // 设置音频源
	// 	  audio.src = audioUrl;
		  
	// 	  // 播放并处理错误
	// 	  audio.play();
	// 	  audio.onError((err) => {
	// 	    console.error('播放失败:', err);
	// 	    uni.showToast({ title: '播放失败，请检查链接或网络', icon: 'none' });
	// 	  });
		  
	// 	  // 监听播放结束事件
		
		 
	// };

</script>

<template>
  <view class="player-container">
    <!-- 歌曲封面 -->
    <view class="album-cover">
      <image :src="audioPlayer.currentSongInfo.value.imgUrl" mode="aspectFill" class="cover-image"></image>
    </view>

    <!-- 歌曲信息 -->
    <view class="song-info">
     <SongList :songId='songId' :currentTime='audioPlayer.currentTime.value'></SongList>
    </view>

    <!-- 进度条 -->
    <view class="progress-bar">
    <progressVue :currentTime='audioPlayer.currentTime.value' :duration='audioPlayer.duration.value' :bufferPercent='100'></progressVue>
    </view>

    <!-- 播放控制 -->
    <view class="controls">
		<view @click="onUp">
			<image src="/static/images/player/play_prev.png" style="width: 100rpx; height: 100rpx;"/>
		</view>
      <view @click="togglePlay">
      	<image src="/static/images/player/play_pause.png" style="width: 100rpx; height: 100rpx;" v-if="isPlayingData"/>
		<image src="/static/images/player/play_resume.png" style="width: 100rpx; height: 100rpx;" v-else/>
      </view>
      
     <view @click="onDown">
     			<image src="/static/images/player/play_next.png" style="width: 100rpx; height: 100rpx;"/>
     		</view>
    </view>
  </view>
</template>

<style scoped>
@import './index.scss';
</style>